<template>
  <div>
    <van-nav-bar
      :border="false"
      :title="$t('pageRobot.robot_setup')"
      left-arrow
      @click-left="$router.back()"
    />
    <van-form label-width="32%">
      <van-field
        :value="market"
        readonly
        clickable
        :label="$t('pageRobot.trade_area')"
        :placeholder="$t('pageRobot.trade_area')"
        :rules="[{ required: true }]"
        @click="onMarket"
      />
      <h3 class="title">预设策略</h3>
      <van-row class="preset">
        <van-col>
          <van-button
            block
            size="small"
            :type="preset === 1 ? 'primary' : 'default'"
            @click="changePreset(1)"
          >
            激进
          </van-button>
        </van-col>
        <van-col>
          <van-button
            block
            size="small"
            :type="preset === 2 ? 'primary' : 'default'"
            @click="changePreset(2)"
          >
            保守
          </van-button>
        </van-col>
        <van-col>
          <van-button
            block
            size="small"
            :type="preset === 3 ? 'primary' : 'default'"
            @click="changePreset(3)"
          >
            稳健
          </van-button>
        </van-col>
        <van-col>
          <van-button
            block
            size="small"
            :type="preset === 4 ? 'primary' : 'default'"
            @click="changePreset(4)"
          >
            自定义
          </van-button>
        </van-col>
      </van-row>
      <van-field
        v-model="first_order_value"
        :label="$t('first_order_amount') + '(' + money + ')'"
        :placeholder="$t('first_order_amount')"
        :rules="[{ required: true }]"
      />
      <van-field
        v-model="max_order_count"
        :label="$t('number_of_orders')"
        :placeholder="$t('number_of_orders')"
        :rules="[{ required: true }]"
      />
      <van-field
        v-model="stop_profit_rate"
        :label="$t('take_profit_ratio') + '(%)'"
        :placeholder="$t('take_profit_ratio')"
        :rules="[{ required: true }]"
      />
      <van-field
        v-model="stop_profit_callback_rate"
        :label="$t('take_profit_retracement') + '(%)'"
        :placeholder="$t('take_profit_retracement')"
        :rules="[{ required: true }]"
      />
      <van-field
        v-model="cover_rate"
        :label="$t('cover_down') + '(%)'"
        :placeholder="$t('cover_down')"
        :rules="[{ required: true }]"
      />
      <van-field
        v-model="cover_callback_rate"
        :label="$t('cover_pullback') + '(%)'"
        :placeholder="$t('cover_pullback')"
        :rules="[{ required: true }]"
      />
      <van-field name="radio" :label="$t('pageRobot.strategy_type')">
        <template #input>
          <van-radio-group v-model="recycle_status" direction="horizontal">
            <van-radio :name="1">{{ $t('cycle_strategy') }}</van-radio>
            <van-radio :name="0">{{ $t('single_strategy') }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-if="formType === 'create' && CHEKC_CDKEY"
        v-model="cd_key"
        :label="$t('cdkey')"
        :placeholder="$t('cdkey')"
        :rules="[{ required: true }]"
      />
      <div v-if="formType === 'create'" class="tips">
        {{ $t('tip') }}：{{ initInfo.quant_startup_min }} {{ initInfo.quant_revenue_type === '2' ? initInfo.system_balance_name : 'USDT' }}
      </div>
      <div style="padding: 16px;">
        <van-button round block type="info" @click="onSubmit">
          {{ $t('actions.submit') }}
        </van-button>
      </div>
    </van-form>
    <van-popup v-model="marketPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="marketLists"
        value-key="market_name"
        @confirm="onConfirm"
        @cancel="marketPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import { CHEKC_CDKEY } from '@/config/index'
export default {
  i18n: {
    messages: {
      zh: {
        tip: '启动机器人最小余额'
      },
      en: {
        tip: 'Start robot minimum balance'
      }
    }
  },
  data() {
    return {
      CHEKC_CDKEY,
      preset: 4,
      formType: 'create',
      marketPicker: false,
      market: '',
      money: '',
      platform: '',
      robot_id: '',
      market_id: '',
      first_order_value: '100',
      max_order_count: '',
      stop_profit_rate: '',
      stop_profit_callback_rate: '',
      cover_rate: '',
      cover_callback_rate: '',
      recycle_status: '1',
      cd_key: ''
    }
  },
  computed: {
    ...mapState({
      initInfo: index => index.initInfo,
      robotList: ({ robot }) => robot.robotList,
      thirdLoginEnabled: ({ thirdLoginEnabled }) => thirdLoginEnabled
    }),
    ...mapGetters({
      markets: 'robot/markets'
    }),
    marketLists() {
      return this.markets(this.platform) || []
    }
  },
  created() {
    this.formType = route.query.type
    if (this.formType === 'edit') {
      const robot = (this.robot = this.robotList.find(
        item => route.query.robot_id === item.id
      ))
      nextTick(() => {
        this.platform = robot.platform
        this.market = robot.market_name
        this.market_id = robot.market_id
        this.robot_id = robot.id
        this.first_order_value = robot.first_order_value
        this.max_order_count = robot.max_order_count
        this.stop_profit_rate = robot.stop_profit_rate
        this.stop_profit_callback_rate = robot.stop_profit_callback_rate
        this.cover_rate = robot.cover_rate
        this.cover_callback_rate = robot.cover_callback_rate
        this.recycle_status = robot.recycle_status
        this.money = robot.money
      })
    } else {
      const markets = JSON.parse(route.query.data)
      this.platform = route.query.platform
      this.market = markets.market_name
      this.market_id = markets.id
      this.money = markets.money
    }
    this.marketList({
      platform: this.platform,
      type: 'spot'
    })
  },
  methods: {
    ...mapActions({
      marketList: 'robot/marketList',
      robotCreate: 'robot/robotCreate',
      robotEdit: 'robot/robotEdit'
    }),
    onMarket() {
      if (this.formType === 'create') {
        this.marketPicker = true
      }
    },
    onSubmit() {
      toast.loading()
      const payload = {
        platform: this.platform,
        market_id: this.market_id,
        first_order_value: this.first_order_value,
        max_order_count: this.max_order_count,
        stop_profit_rate: this.stop_profit_rate,
        stop_profit_callback_rate: this.stop_profit_callback_rate,
        cover_rate: this.cover_rate,
        cover_callback_rate: this.cover_callback_rate,
        recycle_status: this.recycle_status,
        cd_key: this.cd_key
      }
      if (this.formType === 'edit') {
        payload.robot_id = this.robot_id
      }
      const promise =
        this.formType === 'create' ? this.robotCreate(payload) : this.robotEdit(payload)
      promise
        .then((res) => {
          toast(res.msg)
          router.back()
        })
        .catch(({ msg }) => toast(msg))
    },
    onConfirm(value) {
      this.market = value.market_name
      this.market_id = value.id
      this.marketPicker = false
    },
    changePreset(index) {
      this.preset = index
      if (index === 1) {
        this.max_order_count = '6'
        this.stop_profit_rate = '1'
        this.stop_profit_callback_rate = '0.3'
        this.cover_rate = '1.8'
        this.cover_callback_rate = '0.3'
      } else if (index === 2) {
        this.max_order_count = '6'
        this.stop_profit_rate = '1.3'
        this.stop_profit_callback_rate = '0.3'
        this.cover_rate = '1.5'
        this.cover_callback_rate = '0.3'
      } else if (index === 3) {
        this.max_order_count = '6'
        this.stop_profit_rate = '1.5'
        this.stop_profit_callback_rate = '0.3'
        this.cover_rate = '2'
        this.cover_callback_rate = '0.5'
      } else if (index === 4) {
        this.max_order_count = ''
        this.stop_profit_rate = ''
        this.stop_profit_callback_rate = ''
        this.cover_rate = ''
        this.cover_callback_rate = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  padding: 10px 15px;
  font-size: 14px;line-height: 1;
}
.preset {
  padding: 0 10px 10px;
  display: flex;
  justify-content: space-around;
  .van-col {
    flex: 1;
    margin: 0 5px;
  }
}
.tips {
  padding: 10px 15px;
  font-size: 12px;
}
</style>
